.btn {
  margin: 8px auto;
  width: 160px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.background-after {
  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}
.background-before {
  &::before {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.rect {
  background: #f6ed8d;
}

.circle {
  border-radius: 64px;
  background: #7de3c8;
}

.parallelogram {
  // transform: skewX(15deg); //这样会影响到文字的展示形式
  &::before {
    background: #03f463;
    transform: skewX(15deg);
    z-index: -1;
  }
}

.trapezoid {
  &::after {
    background: #ff9800;
    /**
      perspective 改变视角
        1 和元素高度有关系，如果值和元素高度保持一致，则看起来不会有变化
        2 和rotate有关系, 必须要在rotate之前
    */
    transform: perspective(40px) rotateX(10deg);
    transform-origin: bottom;
    z-index: -1;
  }
}

.notching {
  margin: 8px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  // background-color: #ff1493;
  background-image: url(../../assets/08-.jpg);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  &.notching1 {
    /**
      background-size对background-image起作用, 对background-color不起作用
      background-position 对background-image起作用, 对background-color不起作用
      top left 左上角开始
      top right 右上角开始
      bottom left 左下角开始
      bottom right 右下角开始
    */
    background-image: linear-gradient(135deg, transparent 10px, #ff1493 0),
      linear-gradient(-135deg, transparent 10px, green 0),
      linear-gradient(-45deg, transparent 10px, yellow 0),
      linear-gradient(45deg, transparent 10px, blue 0);
    background-position-x: left, right, right, left;
    background-position-y: top, top, bottom, bottom;
    /**
       to top、to bottom、to left 和 to right 分别等价于 0deg、180deg、270deg 和 90deg
       三个关键
       1 反向 default是 to bottom
       2 每段所占 百分比
       3 每段过渡的位置
  
       linear-gradient(red 10%, 30%, blue 90%); 
          起始点到 10% 是纯红色，90% 到结束点是纯蓝色。10% 和 90% 之间是颜色从红色过渡到蓝色的地方，但是，过渡的中点是 30% 的位置，默认是50%
    */
    //   background: linear-gradient(to top, green 10px, #ff1493 0);
  }
  &.notching2 {
    background-image: linear-gradient(#ff1493), linear-gradient(green),
      linear-gradient(yellow), linear-gradient(blue);
    background-position-x: left, right, right, left;
    background-position-y: top, top, bottom, bottom;
  }
  &.clip-notching {
    background-image: linear-gradient(45deg, #f9d9e7, #ff1493);
    background-size: 100% 100%;
    /**
     8个点位连接起来从 左上 开始，第一个代表 x轴方向的偏移量，第二个代表 y轴方向的偏移量
    */
    clip-path: polygon(
      15px 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% calc(100% - 15px),
      calc(100% - 15px) 100%,
      15px 100%,
      0 calc(100% - 15px),
      0 15px
    );
  }
}

.arrow {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
      -135deg,
      transparent 20px,
      #04e6fb 20px,
      #65ff9a 100%
    ),
    linear-gradient(-45deg, transparent 20px, #04e6fb 20px, #65ff9a 100%);
  background-position-x: right, right;
  background-position-y: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 50%; // 上下两块 1/2
  &.clip-arrow {
    background-image: linear-gradient(45deg, #04e6fb, #65ff9a);
    background-size: 100% 100%;
    clip-path: polygon(
      0 0,
      30px 50%,
      0 100%,
      calc(100% - 30px) 100%,
      100% 50%,
      calc(100% - 30px) 0
    );
  }
}

.inset-circle {
  margin: 8px;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /**
   起点是左下角（100% 100%）
   方向是-45deg, 已弧形扩散
   0 到 半径 12px 是透明的
   半径50px之后都是蓝色
   半径12到50是渐变的
  */
  background-image: radial-gradient(
    circle at 100% 100%,
    transparent 0,
    transparent 12px,
    #2179f5 50px
  );
  &.inset-circle2 {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      ),
      radial-gradient(
        circle at 0 0,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      ),
      radial-gradient(
        circle at 100% 0,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      ),
      radial-gradient(
        circle at 0 100%,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      );
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
    background-size: 70% 70%;
  }
  &.mark {
    background-image: linear-gradient(45deg, #2179f5, #e91e63);
    // css mark https://github.com/chokcoco/iCSS/issues/80
    // 把#2179f5 改为其他颜色 效果不会变化
    mask-image: radial-gradient(
        circle at 100% 100%,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      ),
      radial-gradient(
        circle at 0 0,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      ),
      radial-gradient(
        circle at 100% 0,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      ),
      radial-gradient(
        circle at 0 100%,
        transparent 0,
        transparent 12px,
        #2179f5 13px
      );
    mask-repeat: no-repeat;
    mask-position: right bottom, left top, right top, left bottom;
    mask-size: 70% 70%;
  }
}

.skew {
  position: relative;
  width: 120px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px auto;
  padding-left: 13px;
  box-sizing: border-box;
  &::before {
    content: "";
    position: absolute;
    background: orange;
    top: 0;
    right: -13px;
    width: 100px;
    height: 100%;
    border-radius: 10px;
    z-index: -1;
  }
  &::after {
    border-radius: 10px;
    background: orange;
    transform: skewX(15deg);
    z-index: -1;
  }
}

.outside-circle {
  margin: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 64px;
  background-color: #ff1493;
  border-radius: 10px 10px 0 0;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -20px;
    bottom: 0;
    // background: #000;
    background-image: radial-gradient(
      circle at 0% 0%,
      transparent 20px,
      #ff1493 21px
    );
  }
  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: -20px;
    bottom: 0;
    // background: #000;
    background-image: radial-gradient(
      circle at 100% 0%,
      transparent 20px,
      #ff1493 21px
    );
  }
}
